<template>
  <div class="wrapdiv">
    <el-form class="searchform" :inline="true" :model="form_search">
      <!-- <el-option label="同步" value="sync"></el-option>
          <el-option label="异步" value="async"></el-option> -->

      <el-form-item label="搜索类型">
        <el-select v-model="form_search.type" placeholder="请选择">
          <el-option label="屏幕名称" value="screen_name"></el-option>
          <el-option label="IP/卡号" value="screen_ip"></el-option>
          <!-- <el-option label="屏幕类型" value="type"></el-option> -->
          <!-- <el-option label="屏幕厂家" value="screen_brand"></el-option> -->
        </el-select>
      </el-form-item>
      <el-form-item label="搜索内容">
        <el-input
          v-model.trim="form_search.value"
          placeholder="搜索内容"
          clearable=""
          @clear="clearSearch"
        >
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="info" round plain @click="onSearch">查 询</el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <el-col>
        <el-button
          style="margin: 10px"
          @click="addScreen"
          type="primary"
          title="添加屏幕"
          circle
          icon="el-icon-plus"
        ></el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-table
          class="eltable"
          ref="multipleTable"
          :data="screenInfoList"
          tooltip-effect="dark"
          style="width: 100%"
          :header-cell-style="{
            color: '#111',
            backgroundColor: 'rgba(20,20,20,.1)',
            borderRadius: '2px',
            border:'1px solid #fff'
          }"
          stripe
        >
          <el-table-column type="index"></el-table-column>
          <el-table-column
            prop="name"
            label="名称"
            width="240"
          ></el-table-column>
          <el-table-column prop="ip" label="IP" width="160"> </el-table-column>
          <el-table-column prop="brand" label="厂家" width="160">
          </el-table-column>

          <el-table-column label="行政区" width="100">
            <!-- v-slot都可以 -->
            <template slot-scope="scope">{{ scope.row.district }}</template>
          </el-table-column>
          <el-table-column prop="width" label="宽度" width="80">
          </el-table-column>
          <el-table-column prop="height" label="高度" width="80">
          </el-table-column>
          <el-table-column label="screen_id">
            <template v-slot="scope">
              <span style="white-space: nowrap">
                {{ scope.row.screen_id }}
              </span>
            </template>
          </el-table-column>

          <!-- <el-table-column label="分组" width="80" prop="group_id"> -->
          <el-table-column label="分组" width="120">
            <template slot-scope="scope">
              <span>{{ getGroupNameById(scope.row.group_id) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="130">
            <template slot-scope="scope">
              <el-tooltip
                content="修改屏幕信息"
                placement="left-start"
                :enterable="false"
              >
                <!-- scope.row.screen_id -->
                <el-button
                  type="primary"
                  :plain="true"
                  size="small"
                  icon="el-icon-edit"
                  @click="editScreen(scope.row)"
                ></el-button>
              </el-tooltip>
              <!-- editScreen(scope.row.id,scope.row.username,scope.row.email,scope.row.mobile,) -->
              <el-button
                type="danger"
                :plain="true"
                size="small"
                icon="el-icon-delete"
                @click="deleteScreen(scope.row.screen_id)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col class="mypagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pageNum"
          :page-sizes="[10, 20, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </el-col>
    </el-row>
    <!-- dialog add edit screen info :screen_info="screen_info" -->
    <div>
      <screen_edit_dialog
        :dialogformvisible_edit.sync="dialogformvisible_edit"
        :is_add_screen="is_add_screen"
      ></screen_edit_dialog>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
/*
查询屏幕ip,
查询屏幕名称,
查询屏幕类型,
查询厂家,


添加屏幕, 删除屏幕,     ...分页.
展示屏幕信息列表: checkbox, 行政区,名称,卡号/IP,厂家,宽度,高度,分组,任务,截屏.
双击修改 屏幕信息,

*/
import Screen_edit_dialog from "../components/Screen_edit_dialog.vue";
export default {
  name: "Screen",
  data() {
    return {
      form_search: {
        type: "screen_name",
        value: "",
      },
      //tableData: [],
      dialogformvisible_edit: false,
      is_add_screen: false,

      ///page
      total: 0,
      pageNum: 1,
      pageSize: 10,
      //分屏的 部分 列表 ,非全部
      screenInfoList: [],
    };
  },
  computed: {
    // localComputed(){} ,
    ...mapState(["screen_info", "groupInfoListAll"]),
  },
  watch: {
    dialogformvisible_edit(v, oldval) {
      console.log(`dialogformvisible_edit ==${v}`);
      if (v == false) this.getScreensByPage();
    },
  },
  props: ["userId"],
  components: {
    Screen_edit_dialog,
  },
  mounted() {
    this.getGroupsAll();
    this.getScreensByPage();
  },
  methods: {
    ...mapMutations(["setScreen_info", "setGroupListAll"]),
    getGroupNameById(group_id) {
      let retV = this.groupInfoListAll.find((v) => {
        return v.group_id == group_id;
      });
      if (retV) return retV.name;
      else return "";
    },
    //分页
    async getScreensByPage() {
      let ret = await this.$http.get(
        `screensByPage?query=${this.form_search.value}&pageNum=${this.pageNum}&pageSize=${this.pageSize}`
        // `getAllScreensInfoByPage?query=${this.query}&pageNum=${this.pageNum}&pageSize=${this.pageSize}`
      );
      let { total, pageNum, leds } = ret.data.data;
      this.total = total;
      this.pageNum = pageNum;
      console.log(leds);
      this.screenInfoList = leds;
    },

    async getGroupsAll() {
      let ret = await this.$http.get(`groups`);
      // console.log(ret);
      let { groups } = ret.data.data;
      console.log(groups);
      this.setGroupListAll(groups);
    },

    clearSearch() {
      // 搜索内容
    },
    deleteScreen(screen_id) {
      this.$confirm("确认删除屏幕？")
        .then(async (_) => {
          console.log("delete", screen_id);
          //发起网络请求
          //仅 本地模拟删除, 真实后台请求 不需要find
          let ret = await this.$http.delete(`screens/${screen_id}`);

          console.log(ret);
          let { action, result } = ret.data.data;
          console.log(action, result);
          if (result == "ok") this.$message.success("删除屏幕成功");
          else this.$message.error("删除屏幕失败");

          this.getScreensByPage();
        })
        .catch((_) => {});
    },
    editScreen(screen_info) {
      console.log(screen_info);
      this.is_add_screen = false;
      this.setScreen_info(screen_info);
      this.dialogformvisible_edit = true;
    },
    addScreen() {
      this.is_add_screen = true;
      this.dialogformvisible_edit = true;
      console.log("add");
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getScreensByPage();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.getScreensByPage();
    },

    onSearch() {
      // if (this.form_search.value) {
      //   //axios.get('/screens?type="name"&value="按不出"')
      //   console.log(this.form_search);
      // } else {
      //   //查询全部屏幕
      //   //axios.get('/screens')
      //   console.log("getAllScreens");
      // }
      this.getScreensByPage();
    },
  },
};
</script>

<style scoped>
.searchform {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}
.searchform .el-form-item {
  /* margin-bottom: 0px; */
  /* form item 默认有个下边距 */
  margin: 10px;
}

.el-pagination {
  display: inline-block;
}

.mypagination{
  margin: 10px;
}
.wrapdiv {
  width: 98%;
  border-radius: 10px;
  /* box-shadow: 10px 10px 10px #aaa; */

  /* 0 0 外边就都有阴影了 */
  box-shadow: 0 0 10px #aaa;
  padding: 5px;
}
</style>
